import { Modal } from 'antd';
import { useEffect, useState } from 'react';
import '../leave/leave.less';
import { request, history } from 'umi';
export default function applyOne(props: any) {
  // 提示框
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 取消弹框
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const [keyword, setKeyWord] = useState('');
  const data = props.history.location.state;

  return (
    <div className="applyLeave">
      <div className="applyleave">
        <button>草稿箱</button>
        {data.done === '待办' ? (
          <button
            onClick={() => {
              setIsModalOpen(true);
              setKeyWord('是否要提交审批？');
            }}
          >
            提交审批
          </button>
        ) : (
          <button
            onClick={() => {
              setIsModalOpen(true);
              setKeyWord('是否主动撤销审批？');
            }}
          >
            撤销审批
          </button>
        )}
        <button>流程图</button>
        <button>导入</button>
        <button>打印</button>
        <button>查看日志</button>
      </div>
      <div className="applyLeaveContent applyLeaveContent0">
        <h1>请假申请单</h1>
        <table className="table">
          <tbody>
            <tr>
              <td>单据编号：</td>
              <td>{data.anumber}</td>
              <td>
                <span>*</span> 员工姓名：
              </td>
              <td>{data.aname}</td>
              <td>
                <span>*</span> 员工部门：
              </td>
              <td>{data.department}</td>
            </tr>
            <tr>
              <td>
                <span>*</span> 员工岗位：
              </td>
              <td>{data.prodepartment}</td>
              <td>
                <span>*</span> 申请时间：
              </td>
              <td>{data.applyTime}</td>
              <td>
                <span>*</span>请假类型：
              </td>
              <td>{data.applyType}</td>
            </tr>
            <tr>
              <td>
                <span>*</span> 开始时间：
              </td>
              <td>{data.startTime}</td>
              <td>
                <span>*</span> 结束时间：
              </td>
              <td>{data.endTime}</td>
              <td>
                <span>*</span> 请假天数：
              </td>
              <td>{data.days}</td>
            </tr>
            <tr>
              <td>请假事由：</td>
              <td colspan={5}>{data.technological}</td>
            </tr>
          </tbody>
        </table>
        <table className="table0">
          <tbody>
            <tr>
              <td colspan={9}>
                附件上传<button>批量上传</button>
              </td>
            </tr>
            <tr>
              <td>文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan={9}></td>
            </tr>
          </tbody>
        </table>
        {data.done === '已办' ? (
          <img
            src="https://erpdemo.fanpusoft.com/Images/FlowStatusIcon/approve.png"
            alt=""
            style={{
              display: 'flex',
              position: 'fixed',
              top: '150px',
              width: '150px',
              zIndex: '300',
              right: '30px',
            }}
          />
        ) : (
          ''
        )}
      </div>
      <Modal
        className="modalopen"
        title="提示对话框"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <div className="content">
          <span>i</span>
          <p>{keyword}</p>
        </div>
        <button
          onClick={() => {
            if (data.done === '已办') {
              request('/api/ljf/delDealt', {
                method: 'post',
                data: { _id: data._id },
              }).then((res: any) => {
                if (res.code === 200) {
                  setIsModalOpen(false);
                  history.push('/person/dealt');
                }
              });
            } else if (data.done === '待办') {
              request('/api/ljf/applyDealt', {
                method: 'post',
                data: { _id: data._id },
              }).then((res: any) => {
                if (res.code === 200) {
                  setIsModalOpen(false);
                  history.push('/person/dealt');
                }
              });
            }
          }}
        >
          确定
        </button>
      </Modal>
    </div>
  );
}
